<template>
  <div class="section">
    <span class="text">欢迎来到宁波财经学院虚拟仿真实验室！</span>
    <div class="login" v-if="!userInfo" style="margin-right: 30px">
      <router-link to="/home/pro" class="nav-link">首页</router-link>
      <router-link class="nav-link" to="/login">登录</router-link>
      <span class="to">|</span>
      <router-link class="nav-link" to="/register">注册</router-link>
    </div>
    <div class="login" v-if="userInfo">
      <router-link to="/home/pro" class="nav-link">首页</router-link>
      <span class="nav-link">{{ userInfo.nickName }}</span>
      <span class="to">|</span>
      <span class="nav-link" @click="logout">退出</span>
    </div>
  </div>
</template>
<script>
import { removeToken } from '@/request/auth'

export default {
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem("userInfo"))
    }

  },
  methods: {
    logout() {
      localStorage.removeItem("userInfo")
      removeToken()
      location.reload()
    }
  }


};
</script>

<style scoped>
.to {
  margin: 0 4px;
  color: #07030300;
}

.login {
  padding-right: 70px;
}

.section {
  max-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #303440;
  min-width: 1180px;
  padding-left: 100px;
  box-sizing: border-box;
}

.nav-link {
  display: inline-block;
  color: #303440;
  padding: 0 4px;
  text-decoration: none;
  line-height: 40px;
  font-size: 14px;
}

.nav-link:hover {
  color: #0f78f9;
  cursor: pointer;
}
</style>